<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {include file="../common/header"}
</head>
<body class="vae-body">
    <div class="vae-content">
        <form class="layui-form layui-form-pane" action="javascript:;" method="POST" enctype="multipart/form-data">{:token()}
            <div class="layui-form-item">
                <label class="layui-form-label">批次名</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入批次名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">数据用途</label>

                <div class="layui-input-block">
                    <select name="type_id" lay-filter="aihao">
                        {foreach $typeList as $user}
                            <option value="{$user.id}">{$user.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据简介</label>
                <div class="layui-input-block">
                    <input type="text" name="data_intro" required  lay-verify="required" placeholder="数据来源简介" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="area-picker">
                <div class="layui-form-label">默认地址</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Excel</label>
                <div class="layui-input-inline">
                    <div class="layui-upload">
                        <button type="button" name="myfile" class="layui-btn" id="myfile"><i class="layui-icon"></i>上传文件</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">导入方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="import_type" value="2" title="导入第一张Excel" checked >
                    <input type="radio" name="import_type" value="3" title="导入第二张Excel" >
                    <input type="radio" name="import_type" value="1" title="两张对应导入" >

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">使用密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="download_password" required lay-verify="required" placeholder="请输入下载密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">文件上传成功后/将会保存在云端</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="备注" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <span id="fileUp"></span>
                    <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
{include file="../common/footer"}
<script>

    var loading,formData;
    //Demo
    layui.use('form', function() {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            formData=data.field;
            if (!formData['file']){
                layer.msg('请选择上传文件！',{icon: 5})
                return false;
            }
            layer.confirm('确定提交吗？', {
                btn: ['提交', '取消'] //按钮
            }, function () {
                layer.msg('文件上传中', { icon: 1 });
                loading= layer.load(0, { shade: [0.5, '#393D49'] });
                var $ =layui.jquery;
                $("#fileUp").click();
            }, function () {
                layer.msg('的确是奇葩', { icon: 1 });
            });
                return false;//阻止表单跳转
            });
    });
    function excelForl(filePath,pathName)
    {
        var url = "{:url('ExcelLead/excelUpLoadAndMysqlSave')}";
        var $ = layui.jquery;
        formData['filePath']=filePath;
        formData['pathName']=pathName;
        $.ajax({
            url:url,
            type:'post',
            data:formData,

            success:function(data){

                data=JSON.parse(data);
                if(data['status'] != 1){
                    layer.close(loading);
                    layer.msg('保存失败了！',{icon: 5});//失败的表情
                    return;
                }else if (data['status']==1) {
                    layer.close(loading);
                    layer.msg('成功保存！', {icon: 6});
                    $("#reset").click();
                    return;
                }else {
                    layer.close(loading);
                    layer.msg('保存失败了！',{icon: 5});//失败的表情
                    return;
                }
            },
            complete: function () {
                layer.close(loading);
                return;
            },
        });

    }
</script>
<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //选完文件后不自动上传
        upload.render({
            elem: '#myfile'
            , url:"{:url('ExcelLead/excelUpload')}"
            ,size: 5*1024 //限制文件大小，单位 KB
            ,accept: 'file' //普通文件
            ,exts: 'xls|excel|xlsx|csv' //只允许上传压缩文件
            , auto: false
            //,multiple: true
            , bindAction: '#fileUp'
            , done: function (res) {
                if (res.status==0){
                    layer.close(loading);
                    layer.msg(res.msg,{icon: 5});//失败的表情
                    o.removeClass('layui-btn-disabled');
                } else if (res.status==1){
                    excelForl(res.filePath,res.pathName)
                } else {
                    layer.close(loading);
                    layer.msg('稍后再试！',{icon: 5});//失败的表情
                    o.removeClass('layui-btn-disabled');

                }
            }
        });
    });
</script>
<script>
    layui.config({
        base: '__ADMIN__/mods/'
        , version: '1.0'
    })
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            data: {
                province: '请选择省',
                city: '请选择市',
                county: '请选择区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
    });

</script>

</html>